<template>
	<view>
		<!-- 音频添加 -->
		<view class="back_image" v-if="!Audio.audioUrl" @click="show = true">
			<view class="back_image_content">
				<image src="../../static/tools/addaudio.png" mode=""></image>
			</view>
			<text>添加音频</text>
		</view>

		<!-- 音频显示主体 -->
		<view class="AudioFile" v-else>
			<view class="AudioFile_left" @click="play">
				<image :src="Audio.isPlay == audioIndex ? '../../static/icon/bf.png' : '../../static/icon/tz.png'"
					mode=""></image>
			</view>
			<view class="AudioCentre">
				<view class="AudioCentre_top">{{ Audio.audioName }}</view>
				<view class="AudioCentre_bottom">{{ Audio.audioTime }}</view>
			</view>
			<view class="AudioFile_right" @click="show = true">更换音频</view>
		</view>

		<!-- 导入方式选择 -->
		<u-popup :show="show" :round="18" @close="close" @open="open">
			<view class="u-popup_box">
				<view class="u-popup_">
					<u-button color="#5490FF" type="primary" text="微信对话中导入" @click="weixin"></u-button>
				</view>
				<!-- <view class="u-popup_">
					<u-button color="#5490FF" type="primary" text="手机内存中导入" @click="neicun"></u-button>
				</view> -->
				<view class="u-popup_">
					<u-button color="#5490FF" type="primary" text="取消" @click="close"></u-button>
				</view>
				<view class="title">
					注：支持
					<text>网易、qq、酷我</text>
					等主流音乐播放器导入音乐
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'audios',
		data() {
			return {
				show: false,
				audioIndex: 1
			};
		},
		// 此处定义传入的数据
		props: {
			Audio: {
				audioUrl: '',
				audioName: '',
				audioTime: '',
				isPlay: 0 //0暂停，1播放
			}
		},
		methods: {
			play() {
				this.$emit('importPlay', this.audioIndex);
			},
			weixin() {
				this.show = false;
				this.$emit('WaddAudio');
			},
			neicun() {
				this.show = false;
				this.$emit('NaddAudio');
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
			}
		}
	};
</script>

<style lang="scss">
	.AudioFile {
		width: 676rpx;
		height: 211rpx;
		background: #ffffff;
		border: 1rpx solid #5490FF;
		border-radius: 18rpx;
		display: flex;
		align-items: center;

		.AudioFile_left {
			width: 109rpx;
			height: 109rpx;
			margin-left: 22rpx;
			margin-right: 29rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.AudioCentre {
			width: 325rpx;

			.AudioCentre_top {
				width: 260rpx;
				height: 54rpx;
				line-height: 54rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 33rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.AudioCentre_bottom {
				width: 260rpx;
				height: 54rpx;
				line-height: 54rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a8a8a8;
			}
		}

		.AudioFile_right {
			width: 157rpx;
			height: 54rpx;
			background: #ffffff;
			border: 2rpx solid #5490FF;
			border-radius: 27rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #5490FF;
			text-align: center;
			line-height: 54rpx;
		}
	}

	.u-popup_box {

		.u-popup_ {
			margin: 50rpx 66rpx;
		}

		.title {
			text-align: center;
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 33rpx;

			text {
				color: #5490FF;
			}
		}
	}

	.back_image {
		width: 676rpx;
		height: 211rpx;
		background-image: url(../../static/tools/add_frame.png);
		background-size: 676rpx 211rpx;
		background-size: 676rpx 211rpx;
		background-repeat: no-repeat;
		text-align: center;
		background-color: #ffffff;
		border-radius: 18rpx;

		.back_image_content {
			image {
				display: inline-block;
				margin: auto;
				margin-top: 56rpx;
				margin-bottom: 26rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		text {
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #5490FF;
		}
	}
</style>
